<template>
	<view>
		<u-navbar title="警情会商" :title-size="36"  :title-width="500" title-color="#fff" back-icon-name="arrow-left" back-icon-color="#fff"  :background="background" :custom-back="goBack">
		</u-navbar>
		<view class="content">
			<u-button size="medium" class="add" shape="circle" @click="handleAdd">创建会商</u-button>
			
				<ul class="list-box">
					<li class="list-item" v-for="(item,index) in lists" >
						<div class="i-top">
							<div class="title">{{item.name}}</div>
							
						</div>
						<div class="i-item">
							<div class="status" :style="item.status==1?'background-color: #e7faf9;color:#1fce7a;':'background-color: #f4f4f5;color:#aaaaaa;'">{{item.status==1?'进行中':'已结束'}}</div>
							<div>
								<!-- <i>时间：</i> -->
								<em>{{item.createTime}}</em>
							</div>
						</div>
						<!-- <div class="i-item">
							<span>
								<i>状态：</i>
								  <em v-if="item.status == 1">
								    <i class="point" style="background-color: #50c97a;"></i>
								    进行中
								  </em>
								  <em v-else>
								    <i class="point"></i>
								    已结束
								  </em>
							</span>
						</div> -->
						<!-- <div class="btn" v-if="item.status == 1 && item.homeOwner == true">
							<u-button type="primary" size="mini" @click="close(item.id)">结束</u-button>
						</div> -->
						<div class='passIn'  @click="viewDetails(item.name,item.id,item.status)">
							{{item.status==1?'加入':'查看'}}
						</div>
					</li>
				</ul>
		</view>
		<u-loadmore v-if='true' :status="status" />
		<u-modal v-model="showModal" :content="content" @confirm="confirm" @cancel="cancel" :show-cancel-button="true" title=""></u-modal>
	</view>
</template>

<script>
	export default {
		name: 'policeCon',
		props: {
			
		},
		data() {
			return {
				background: {
					backgroundColor: '#4299f7',
				},
				lists:[],
				userId:'',
				showModal: false,
				content: '确定要结束该会商吗？',
				meetId:'',
				id:'',
				status:'loadmore'
			};
		},
		methods: {
			onPullDownRefresh() {
				this.lists = []
				this.id =''
				this.meetListAll()
			},
		onReachBottom() {
			if (this.status == 'loading' || this.status == 'nomore') {
				return;
			}
				this.meetListAll()
		},
			initWebSocket(url) {
				console.log("创建WebSocket")
				this.websock = new WebSocket(url)
				this.websock.onopenonopen = this.websocketonopen;
				this.websock.onmessage = this.websocketonmessage;
				this.websock.onerror = this.websocketonerror;
				this.websock.onclose = this.websocketclose;
			},
			websocketonopen() {
				// let data = {
				//   code: 0,
				//   msg: '这是client：初次连接'
				// };
				// this.websocketsend(data)
				console.log('WebSocket连接');
			
			},
			websocketonerror() {
				console.log('WebSocket连接失败');
			},
			// 数据接收
			websocketonmessage(e) {
				console.log('数据接收' + e.data);
				let data = JSON.parse(e.data);
				if (data.data.code != "closeAll") {
					if (data.data.message) {
						if (data.data.sender == this.userId) {
							data.data.itself = true
						}
						this.messageList.push(data.data)
					}
				} else {
					this.websock.close();
					this.showSend = false;
					// this.$message.warning(data.data.message);
					uni.showToast({
						icon:'none',
						type: 'warning',
					    title:data.data.message
					})
				}
			},
			// 数据发送
			websocketsend(Data) {
				var data = {
					message: this.message,
					code: "send",
				}
				this.websock.send(JSON.stringify(data));
				this.message = "";
				this.messageList.push()
			},
			// 关闭
			websocketclose(e) {
				console.log('已关闭连接', e);
			},
			goBack(){
				uni.navigateBack()
			},
			meetListAll(){
				this.status = 'loading';
				this.$store.state.common.tabbarList
				this.$api.reqApi.meetListAll(this.id).then(res => {
					if(res.code == 200){
						setTimeout(()=>{
						uni.stopPullDownRefresh()
					},1000)
						if(res.data.details.length<1){
							this.status = 'nomore'
						}else{
							this.status = 'loadmore'
							res.data.details.forEach(ele => {
							 	this.lists.push(ele)
						 });
						 this.id = res.data.details[res.data.details.length-1].id
						 this.userId = res.data.userId
						}
						 
					}
				})
			},
			handleAdd(){
				uni.navigateTo({url: '/pages/scheduling/policeConsultation/addPolice'});
			},
			viewDetails(name,id,status){
				//status 为1是进行中 2是已结束
				uni.navigateTo({url: '/pages/scheduling/policeConsultation/details?name='+name+'&meetId='+id+'&userId='+this.userId+'&status='+status});
			},
			close(id){
				this.showModal=true;
				this.meetId=id;
				this.initWebSocket(`${this.wbUrl}/websocket/${id}/${this.userId}`);
			},
			confirm(){
				let self = this
				this.$api.reqApi.stopMeet({meetId:this.meetId}).then(res => {
					if(res.code == 200){
						uni.showToast({
							icon:'none',
						    title:res.message
						})
						self.$nextTick(() => {
						  //发给所有人通知
						  var data = {
						    message: "当前会话已结束",
						    code: "closeAll",
						  };
						  self.websock.send(JSON.stringify(data));
						  self.meetListAll()
						})
					}
				})
			},
			cancel(){
				this.websock.close();
			}
		},
		mounted() {
			this.meetListAll()
		}
	}
</script>

<style lang="scss" scoped>
.content{
	margin: 0 30rpx;
	height: 100%;
	padding-bottom: 60rpx;

}
.u-load-more-wrap{
		margin-bottom: 80rpx !important;
	}
.add{
	margin: 30rpx 0 20rpx 0;
	padding: 0 50rpx;
	color: #333;
	font-size: 30rpx;
}
.point {
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 10px;
      background-color: #d2d3d8;
      margin-right: 4px;
    }
	::v-deep .u-model__content__message{
		color: rgb(41, 121, 255);
	}
.list-box{
	
	height:calc(100% - 510rpx) ;
	overflow-y: auto;
	i{
		font-style: inherit;
	}
	.list-item{
		background-color: #fff;
		margin-top: 20rpx;
		padding: 20rpx;
		// border: 1px solid #ddd;
		position: relative;
		border-radius: 16px;
		.i-top{
			display: flex;
			align-items: center;
			width: 50%;
			
			&>.title{
				flex: 1;
				font-size: 32rpx;
				color: #333;
				font-weight: 700;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}
		.i-item{
			color: #aaa;
			margin-top: 10rpx;
				display: flex;
			align-items: center;
			.status{
				display: flex;
				align-items: center;
				font-size: 28rpx;
					color: #fff;
					padding: 5rpx 10rpx;
					border-radius: 10rpx;
					margin-right: 20rpx;
				i{
					display: block;
					width: 20rpx;
					height: 20rpx;
					border-radius: 50%;
					margin-right: 10rpx;
				}
			}
			span:first-child{
				margin-right: 20rpx;
			}
			i,em{
				font-size: 26rpx;
				font-style: inherit;
				color: #666666;
			}
		}
		.btn{
			position: absolute;
			right: 20rpx;
			bottom: 10rpx;
			.u-size-mini{
				margin-left: 10rpx;
			}
		}
	}
}
.passIn {
	width: 90rpx;
	height: 40rpx;
	position: absolute;
	top: 46rpx;
	right:28rpx;
	color: #4187f1;
}
.passIn::after {
	content: '';
	width: 28rpx;
	height: 28rpx;
	background: url(../taskManage/image/icon_right.png) no-repeat center;
	background-size: 100% 100%;
	position: absolute;
	top: 3px;
	right: -5px
}
</style>
